import React, { useState, useEffect } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import { Tabs } from "antd";
import SingleList from './edgeNodeList';
import GroupList from './edgeGroupList';
import { ConnectProps, connect, Dispatch } from 'umi';
import trans from "@/utils/translate";
import type { NodeStateType } from './model';
const { TabPane } = Tabs;
interface Props extends ConnectProps {
  dispatch: Dispatch;
  node: NodeStateType;
}
const EdgeNode:React.FC<Props> = (props) => {
  const { dispatch, node } = props;
  console.log(node);
  console.log(node.tab);
  function changeTab (tab: string) {
    dispatch({ type: 'node/setTab', payload: { tab }});
  };
  return (
    <PageContainer>
      <Tabs defaultActiveKey='single' onChange={changeTab} activeKey={node.tab}>
        <TabPane tab={trans('nodeManagement.edgeNode.nodeTab')} key='single'>
          <SingleList></SingleList>
        </TabPane>
        {/* <TabPane tab={trans('nodeManagement.edgeNode.nodeGroupTab')} key='group'>
          <GroupList></GroupList>
        </TabPane> */}
      </Tabs>
    </PageContainer>
  )
};

export default connect(({ node }: { node: NodeStateType }) => ({
  node,
}))(EdgeNode);
